Toggle

Collapse Toggle

Button

Toggle content opens below button

Content in the collapsable element associated with a button.

Toggle content opens above button

Content in the collapsable element associated with a button.

Button Styled As Link

Toggle content opens below "link"

Content in the collapsable element associated with a link.

Toggle content opens above "link"

Content in the collapsable element associated with a link.

HTML

<!-- Button -->
<!-- content opening below button -->
<div class="collapse-group">
    <noscript>
        <style>
            .collapse {
                display: block;
            }
        </style>
    </noscript>
    <button class="button secondary collapsed" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button>
    <p class="collapse" id="collapseExample">Content in the collapsable element.</p>
</div>
<!-- content opening above button -->
<div class="collapse-group">
    <noscript>
        <style>
            .collapse {
                display: block;
            }
        </style>
    </noscript>    
    <p class="collapse" id="collapseExample">Content in the collapsable element.</p>
    <button class="button secondary collapsed" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Button with data-target</button>
</div>
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<!-- Button styled as a link -->
<!-- content opening below "link" -->
<div class="collapse-group">
    <noscript>
        <style>
            .collapse {
                display: block;
            }
        </style>
    </noscript>
    <button class="link collapsed" data-toggle="collapse" data-target="#collapseLinkExample" aria-expanded="false" aria-controls="collapseLinkExample">Toggle "Link"</button>
    <p class="collapse" id="collapseLinkExample">Content in the collapsable element associated with a link.</p>
</div>
<!-- content opening above "link" -->
<div class="collapse-group">
    <noscript>
        <style>
            .collapse {
                display: block;
            }
        </style>
    </noscript>    
    <p class="collapse" id="collapseLinkExample">Content in the collapsable element associated with a link.</p>
    <button class="link collapsed" data-toggle="collapse" data-target="#collapseLinkExample" aria-expanded="false" aria-controls="collapseLinkExample">Toggle "Link"</button>
</div>

Problem Being Solved

We need a clean way to collapse areas of heavy content that may not be immediately necessary to the user.

When to Use

The collapse component should be used for content that only a few users will need to access. It can also be used when a user only needs to see detailed information for one or two items out of a long list.

When Not to Use

Because accordions hide content, they should not be used when the content is pertinent to most audience members.

Formatting

  • Use straight Bootstrap collapse html and classes.